<template>
    <view>
        <view class="banner">
            <image class="banner-img" mode="aspectFit" :src="goodsDetail.image"></image>
            
        </view>
        <!-- <view class="article-meta">
            <text class="article-author">发表于</text>
            <text class="article-text">2018/10/10 10:10:10</text>
        </view> -->
		<view class="article-header">
			<view class="banner-title">{{goodsDetail.title}}: <text class="price">￥{{goodsDetail.favourPrice}}</text></view>
		</view>
        <view class="article-content">
            <parser :html="goodsDetail.content"></parser>
        </view>
		<view class="service-carts">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="leftBtnGroup" @butt="rightBtnGroup" />
		</view>
    </view>
</template>

<script>
	import parser from '@/components/parser/index'
	import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
	
	import { goodDetail } from '@/api/goods.js'
	import '@/mock/goods.js'
	
    export default {
		components:{
			parser,
			uniGoodsNav
		},
        data() {
            return {
				goodsDetail: {},
				options: [
					{
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/kefu.png',
						text: '首页'
					},
					{
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/kefu.png',
						text: '客服'
					}
				],
				buttonGroup: [
					{
						text: '立即咨询',
						backgroundColor: '#ff0000',
						color: '#fff'
					}
				]
            }
        },
        onLoad(event) {
			this.getDetail()
        },
        methods: {
			leftBtnGroup({index}){
				if(index === 0) {
					uni.switchTab({
						url: "../index"
					})
				}
				if(index === 1) {
					
				}
			},
			rightBtnGroup({index}){
				console.log(index)
			},
            getDetail() {
                goodDetail().then(res => {
					if(res.statusCode === 1) {
						this.goodsDetail = res.result
					}
				}).catch(err => {
					
				})
            }
        }
    }
</script>

<style>
    view {
        font-size: 28upx;
        line-height: 1.8;
    }
	
	.service-carts {
		width:100%;
		display: -webkit-box;
		display: -webkit-flex;
		position:fixed;
		bottom:0;
		left:0;
		right:0;
		display: flex;
		flex-direction: column;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
	}

    .banner {
        height: 360upx;
        overflow: hidden;
        position: relative;
        background-color: #ccc;
    }

    .banner-img {
        width: 100%;
    }

    .banner-title {
        max-height: 84upx;
        overflow: hidden;
        font-size: 40upx;
        font-weight: 400;
        line-height: 42upx;
    }

    .article-meta {
        padding: 20upx 40upx;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        color: gray;
    }

    .article-text {
        font-size: 26upx;
        line-height: 50upx;
        margin: 0 20upx;
    }

    .article-author,
    .article-time {
        font-size: 30upx;
    }
	
	.article-header {
		padding: 0 30upx;
		overflow: hidden;
		margin-bottom: 30upx;
	}
	
	.article-header .price {
		font-size:30upx;
		margin-left:15upx;
		line-height:42upx;
		color:#f00;
	}

    .article-content {
        padding: 0 30upx;
        overflow: hidden;
        font-size: 30upx;
        margin-bottom: 30upx;
    }
</style>
